import React from 'react';
import { connect } from 'dva';
import { Tabs, Icon, Card, Form, Input, Button, Spin, message, Alert } from 'antd';
import PropTypes from 'prop-types';
import { Link } from 'dva/router';
import { routerRedux } from 'dva/router';
import config from '../../../server/utils/config'

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
class Account extends React.Component {
    constructor(props) {
        super(props);
    };

    initState = {};
    componentDidMount() {
        this.refs.showdiv.outerHTML = "";
        this.refs.showdiv.innerHTML = "";
        if (this.initState.islogin) {
            this.props.dispatch({ type: 'account/go', payload: { url: '/' } });
        }
    };

    state = {
        signin: '',
        signup: 'none',
        confirmDirty: false,
        autoCompleteResult: [],
        loading: true
    };
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };
    checkPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码不一致');
        } else {
            callback();
        }
    };
    checkConfirm = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
        }
        callback();
    };
    loginHandler = (e) => {
        e.preventDefault();
        var fields = this.props.form.validateFieldsAndScroll;
        fields((errors, values) => {
            if (errors) {
                return;
            }
            const data = {
                loginName: values.loginName,
                password: values.lpassword
            }
            this.props.dispatch({
                type: 'account/login',
                payload: {
                    formData: data,
                    fromUrl: this.props.account.fromurl
                }
            });
        });

    };
    render() {
        const { getFieldDecorator } = this.props.form;
        const { loading, errorMsg, formstate } = this.props.account;
        return (
            <div className='login-box'>
                <div className={'loading-box'} ref='showdiv'>
                    <img ref='loading' src={config.staticServer + '/images/loading.gif'} />
                </div>
                <div className='login-body'>
                    <Spin className="login-spin" tip='请求中...' spinning={loading} delay={100} />
                    <img ref="logoImage" className='login-logo' src={config.staticServer + "/images/logo.png"} />
                    <h2 className='login-tips'>脚手架脚手架</h2>
                    <Alert style={errorMsg == '' ? { display: 'none', marginBottom: '13px' } : { display: '', marginBottom: '13px' }}
                        message={errorMsg} type={formstate} showIcon />
                    <Form layout={'vertical'} style={{ display: this.state.signin }} onSubmit={this.loginHandler}>
                        <FormItem label="登录名">
                            {getFieldDecorator('loginName', {
                                rules: [{ required: true, message: '请输入你的登录名!', whitespace: true }]
                            })(<Input placeholder="请输入你的登录名!" />)}
                        </FormItem>
                        <FormItem label="密码" hasFeedback>
                            {getFieldDecorator('lpassword', {
                                rules: [{
                                    required: true, message: '请输入你的密码！',
                                }, {
                                    validator: this.checkConfirm,
                                }],
                            })(<Input type="password" placeholder="请输入你的密码!" />)}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>登陆</Button>
                        </FormItem>
                    </Form>
                </div>

                <div className='login-footer'>
                    <span><Link to='/' >大厅</Link></span>
                    <span className="dot">·</span>
                    <span><Link to='/tag'>标签</Link></span>
                    <span className="dot">·</span>
                    <span><Link to='/about'>联系我们</Link></span>
                    <br />
                    <span>© 2017 teambp </span><span className="dot">·</span><span>赠人玫瑰，手有余香</span>
                    <span className="dot">·</span><span>最好的学习方法，就是授人以渔</span>
                </div>
                <div className='wrapper'>
                    <ul className='bg-bubbles'>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div >



        )
    }
}

Account.propTypes = {
    state: PropTypes.object,
    form: PropTypes.object,
    dispatch: PropTypes.func
}
const WrappedRegistrationForm = Form.create()(Account);


export default connect(({ account, loading }) => ({ account, loading }))(WrappedRegistrationForm);